<template>
  <div class="pie-wrap">
    <div id="journeyStep4Chart2" ref="topicRank" style="height: 400px;"></div>
  </div>
</template>
<script>
  export default {
    mounted() {
      this.drawchart()
    },
    methods: {
      drawchart() {
        var plantCap = [{
          name: '贝伐珠单',
          value: '432'
        }, {
          name: '阿法替尼',
          value: '270'
        }, {
          name: '全脑放疗',
          value: '145'
        }, {
          name: '脑转移',
          value: '134'
        },{
          name: 'PD-1适用',
          value: '11'
        },{
          name: '含铂双药',
          value: '65'
        },{
          name: '阿来替尼',
          value: '127'
        },{
          name: '脑扩散',
          value: '65'
        }];

        var datalist = [{
          offset: [56, 24],
          symbolSize: 120,
          opacity: .95,
          color: '#c5efa9'
        }, {
          offset: [35, 80],
          symbolSize: 95,
          opacity: .88,
          color: '#c5efa9'
        }, {
          offset: [20, 43],
          symbolSize: 90,
          opacity: .84,
          color: '#c5efa9'
        }, {
          offset: [83, 65],
          symbolSize: 90,
          opacity: .8,
          color: '#c5efa9'
        }, {
          offset: [84, 30],
          symbolSize: 76 ,
          opacity: .8,
          color: '#20535f'
        }, {
          offset: [63, 45],
          symbolSize: 57,
          opacity: .8,
          color: '#20535f'
        }, {
          offset: [45, 45],
          symbolSize: 35,
          opacity: .8,
          color: '#397f74'
        }, {
          offset: [25, 25],
          symbolSize: 26,
          opacity: .8,
          color: '#397f74'
        }];
        var datas = [];
        for (var i = 0; i < plantCap.length; i++) {
          var item = plantCap[i];
          var itemToStyle = datalist[i];
          datas.push({
            name: item.value + '\n' + item.name,
            value: itemToStyle.offset,
            symbolSize: itemToStyle.symbolSize,
            label: {
              normal: {
                textStyle: {
                  fontSize: 11
                }
              }
            },
            itemStyle: {
              normal: {
                color: itemToStyle.color,
                opacity: itemToStyle.opacity
              }
            },
          })
        };
        var option = {
          grid: {
            show: false,
            top: 10,
            bottom: 10
          },
          xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
          }],
          yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
          }],
          series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                  fontSize: '20'
                }
              },
            },
            itemStyle: {
              normal: {
                color: '#00acea'
              }
            },
            data: datas
          }]
        };

        var mycharts = this.$echarts.init(this.$refs.topicRank)
        mycharts.setOption(option)
      }
    }
  }
</script>
<style>
  .pie-wrap{
    position: relative;
  }
  .pie-wrap .pie-count{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 170px;
    height: 80px;
    top: 160px;
    left: 50%;
    margin-left: -85px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #fff;
  }
</style>
